<div class="form-main-wrapper">
  <div class="form-main-header form-main-header-black">
    <h4><span class="form-main-header-status">
      <% if @category == "Speech" %>
        Upload a new speech video.
      <% elsif @category == "Evaluation" %>
        Upload an evaluation video.
      <% elsif @category == "Answer" %>
        Upload an answer video.
      <% end %>
    </span></h4>
  </div>
  <div class="form-main-container form-main-container-widest">
    <div class="upload-inner">

      <div class="upload-box-left-column">
        <div class="upload-box-button-container">
          <div class="upload-init-action-icon">
            <%= image_tag "video_upload.png" %>
          </div>
          <button type="button" class="btn">
            <span><strong>Select video file from your computer</strong></span>
          </button>
        </div>

        <!--%= s3_uploader_form post: worker_posts_url, as: "video_url", id: "vid-s3-uploader" do %-->
          <!--div class="upload-input-wrap"-->
            <!--%= file_field_tag :file, multiple: false %-->
          <!--/div-->
        <!--% end %-->
        
        <%= form_for(@post, :html => {:id => "vid-jf-uploader" }) do |f| %>
          <div class="upload-input-wrap">
            <%= f.file_field :video, multiple: false %>
          </div>
        <% end %>

        <div class="upload-video-info hide">
          <h4></h4>
        </div>
      </div>

      <div class="upload-input-form hide">        
        <div class="upload-progress-container">
          <script id="template-upload" type="text/x-tmpl">
            <div class="upload-progress">
              <h4>{%=o.name%}</h4>
              <div class="progress progress-striped active"><div class="bar" style="width: 0%"></div></div>
            </div>
          </script>

          <div class="progress-save hide">
            <span class="progress-save-img"><%= image_tag "progress.gif" %></span>
            <strong>Please wait...</strong>
          </div>
        </div>
        <div>
          <%= simple_form_for @post, :url => save_posts_path(@post), :validate => true do |f| %>
            <% if @category == "Speech" %>
              <div>
                <%= f.label "Objective" %>
                <%= f.collection_select :objective_id, Objective.order(:name), :id, :name %>
              </div>
              <div class="control-group">
                <%= f.label "Title" %>
                <div class="controls">
                  <%= f.text_area :title, :rows => 2, :placeholder => "", :class => "span6" %>
                </div>
              </div>
            <% elsif @category == "Evaluation" %>
              <h5>Rate this speech (1 to 10, as 10 is the highest)</h5>
              <%= f.fields_for :ratings do |builder| %>
                <%= render 'ratings/rate', :post => @post, f: builder %>
              <% end %>
            <% end %>
            <div class="control-group">
              <%= f.label "Description" %>
              <div class="controls">
                <%= f.text_area :content, :rows => 5, :placeholder => "", :class => "span6" %>
              </div>
            </div>
            <div><%= f.label "Privacy" %><%= f.select :privacy, options_for_select(["Public", "Members", "Private"]) %></div>
            <div>
              <%= f.hidden_field :category, :value => @category %>
              <% if @category == "Evaluation" %>
                <%= f.hidden_field :title, :value => truncate(@relative.title, :length => 128) %>
                <%= f.hidden_field :speech_id, :value => params[:link_id] %>
              <% elsif @category == "Answer" %>
                <%= f.hidden_field :title, :value => truncate(@relative.content, :length => 128) %>
                <%= f.hidden_field :question_id, :value => params[:link_id] %>
              <% end %>
              <%= f.hidden_field :success, :value => true %>
            </div>
            <div class="create-button"><%= f.submit "Create Post", :disabled => true, :class => "btn btn-inverse pull-left" %></div>
          <% end %>
        </div>
      </div>

      <div id="upload-box-right-column">
        <% if @category == "Speech" or @category == "Evaluation" %>
          <% if @category == "Speech" %>
            <h5>Here is your last speech.</h5>
          <% else %>
            <h5>Evaluate this speech?</h5>
          <% end %>
          <% if @relative.present? %> 
          <li class="video-list-item">
          <div class="video-thumb-wrap">
            <span class="video-thumb">
              <%= link_to image_tag(post_poster_url(@relative)), @relative %>
            </span>
            <span class="video-time"><%= Time.at(@relative.length).gmtime.strftime('%-M:%S') %></span>
          </div>
          <div class="video-info-upload-wrap">
            <div class="video-info-upload">
              <div class="video-user-avatar">
                <%= link_to image_tag(user_avatar_url(@relative.user)), post_channel_path(@relative.user.name) %>
              </div>
              <div class="video-post-info">
                <div class="video-post-info-inner">
                  <span class="video-user-name"><%= link_to truncate(@relative.user.name, :length => 15), post_channel_path(@relative.user.name) %></span>
                  <span class="video-post-date"><%= time_ago_in_words(@relative.created_at) %> ago</span>
                </div>
                <div class="video-theme-group">
                  <%= @relative.category %>
                  <%= post_subject_value(@relative) %>
                </div>
              </div>
            </div>
            <div class="video-title" title="" style="max-height:128px;">
              <div style="float:left; width:228px; max-height:112px;">
                <%= @relative.title %>
              </div>
              <div class="video-stat" style="font-weight: normal;">
                <span class="video-view"><%= number_with_delimiter(@relative.views) %> views</span>
                <span class="video-like">
                  <%= number_with_delimiter(@relative.likes.size) %>
                  <%= image_tag "thumb_up.png" %>
                </span>
              </div>
            </div>
            
          </div>
          </li>
          <% end %>
        <% elsif @category == "Answer" %>
          <h5>Answer this question?</h5>
          <li class="question-list-item">
          <div class="question-info-wrap">
            <div class="question-info">
              <div class="question-list-avatar">
                <%= link_to image_tag(user_avatar_url(@relative.user)), post_channel_path(@relative.user.name) %>
              </div>
              <div class="question-post-info">
                <div class="question-post-info-inner">
                  <span class="question-user-name"><%= link_to @relative.user.name, post_channel_path(@relative.user.name) %></span>
                  <span class="question-post-date"><%= time_ago_in_words(@relative.created_at) %> ago</span>
                </div>
                <div class="question-list-content" style="max-height: 112px;"><%= @relative.content %></div>
                <div class="question-stat">
                  <span class="question-view"><%= number_with_delimiter(@relative.posts.size) %> answers</span>
                  <span class="question-links pull-right hide"><%= link_to 'Show Page', question_path(@relative) %></span>
                </div>
              </div>
            </div>
          </div>
          </li>
        <% end %>
      </div>
    </div>
    <div id="upload-drag-drop-info">
        Drag and drop videos anywhere on this page to start uploading.
    </div>
  </div>
</div>

